<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-reco :recoList="recoList" :swiperList="swiperList"></home-reco>
    <home-week :weekList="weekList"></home-week>
    <app-footer></app-footer>
  </div>
</template>

<script>
import HomeHeader from "@/components/homePages/HomeHeader";
import HomeSwiper from "@/components/homePages/HomeSwiper";
import HomeIcons from "@/components/homePages/HomeIcons";
import HomeReco from "@/components/homePages/HomeReco";
import HomeWeek from "@/components/homePages/HomeWeek";
import AppFooter from "@/components/AppFooter";
import { mapState } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      swiperList: [],
      iconList: [],
      recoList: [],
      weekList: [],
      tmpCity: ""
    };
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeReco,
    HomeWeek,
    AppFooter
  },
  computed: {
    ...mapState(["city"])
  },
  methods: {
    getHomeInfo() {
      this.$axios.get("static/mock/index.json?city=" + this.city).then(res => {
        let tmp = res.data;
        if (tmp.ret && tmp.data) {
          // this.city = tmp.data.city;
          this.weekList = tmp.data.weekList;
          this.iconList = tmp.data.iconList;
          this.swiperList = tmp.data.swiperList;
          this.recoList = tmp.data.recoList;
        }
      });
    }
  },
  mounted() {
    this.getHomeInfo();
    this.tmpCity = this.city;
  },
  activated() {
    if (this.tmpCity != this.city) {
      this.tmpCity = this.city;
      this.getHomeInfo();
    }
  },
  deactivated() {}
};
</script>


<style scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>
